<template>
  <div class="app-login">
    <img :src="centerIcon" alt="" />
    <div class="center">
      <div class="left">
        <img :src="leftIcon" alt="" />
      </div>
      <div class="right">
        <div class="title">欢迎来到百科汇采</div>
        <div class="sub-title">请登录产品合伙人管理系统</div>
        <el-form
          autocomplete="on"
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-position="left"
        >
          <el-form-item prop="username">
            <el-input
              name="username"
              type="text"
              v-model="loginForm.username"
              autocomplete="on"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              name="password"
              :type="pwdType"
              @keyup.enter.native="handleLogin"
              v-model="loginForm.password"
              autocomplete="on"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
            >
              <span slot="suffix" @click="showPwd">
                <i class="el-icon-view"></i>
              </span>
            </el-input>
          </el-form-item>
          <div style="margin-top: 48px;">
            <el-button
              style="width: 100%"
              type="primary"
              :loading="loading"
              @click.native.prevent="handleLogin"
            >登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";
import { setCookie, getCookie } from "@/utils/support";
import leftIcon from "@/assets/images/left-bg.png";
import centerIcon from "@/assets/images/login-center-bg.png";

export default {
  name: "login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error("密码不能小于3位"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [{ required: true, trigger: "blur", validator: validatePass }]
      },
      loading: false,
      pwdType: "password",
      leftIcon,
      centerIcon,
    };
  },
  created() {
    this.loginForm.username = getCookie("username");
    this.loginForm.password = getCookie("password");
    if (
      this.loginForm.username === undefined ||
      this.loginForm.username == null ||
      this.loginForm.username === ""
    ) {
      this.loginForm.username = "admin";
    }
    if (
      this.loginForm.password === undefined ||
      this.loginForm.password == null
    ) {
      this.loginForm.password = "";
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // let isSupport = getSupport();
          // if(isSupport===undefined||isSupport==null){
          //   this.dialogVisible =true;
          //   return;
          // }
          this.loading = true;
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.loading = false;
              setCookie("username", this.loginForm.username, 15);
              setCookie("password", this.loginForm.password, 15);
              this.$router.push({ path: "/" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("参数验证不合法！");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.app-login{
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-login > img{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.center{
  width: 874px;
  height: 478px;
  background-color: rgba(255, 255, 255, 0.93);
  border-radius: 11px;
  box-shadow: 0px 0px 50px 20px rgba(10, 71, 131, 0.5);
  display: flex;
  align-items: center;
  padding: 80px 46px;
  box-sizing: border-box;
}
.left{
  width: 410px;
  height: 306px;
}
.left img{
  width: 100%;
}
.right{
  width: 315px;
  height: 100%;
  padding-left: 28px;
  text-align: left;
}
.title{
  font-size: 32px;
  font-weight: 700;
  color: #314155;
}
.sub-title{
  font-size: 23px;
  font-weight: 700;
  margin: 12px 0 36px;
  color: #314155;
}
</style>
